<template>
  <div class="wrap">
    <p class="login_title">账号登录</p>
    <div class="account">
      <span>账号</span><input type="text" name=""  placeholder="请输入账号">
    </div>
    <div class="password">
      <span>密码</span><input type="text" name=""  placeholder="请输入密码"><span class="forget">忘记密码</span>
    </div>
    <div class="login_btn">
      <button @click="test">立即登录</button>
    </div>
    <div class="login_mode">
      <span @click="msgLogin">短信登录</span><span class="go_register">没有账号 ？去<a href="">注册</a></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginMessgae',
  methods: {
      msgLogin: function () {
          this.$router.push({ path: '/loginMsg'})
      },
      test: function () {
          this.$router.push({ path: '/mycourse'})
      }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login_title{
    font-family: MicrosoftYaHei;
    font-size: 22px;
    color: #4C4C4C;
    letter-spacing: 3.3px;
    margin-top: 41.5px;
  }
  .account{
    margin-top: 60px;
    border-bottom: 1px solid #E7E7E7;
    padding-bottom: 10px;
  }
  .account span{
    font-size: 14px;
  }
  .account input{
    font-size: 14px;
    margin-left: 40px;
  }
  .password{
    margin-top: 41.5px;
    border-bottom: 1px solid #E7E7E7;
    padding-bottom: 10px;
  }
  .password span{
    font-size: 14px;
  }
  .password .forget{
    float: right;
    color: #169CF1;
  }
  .password input{
    font-size: 14px;
    margin-left: 40px;
  }
  .login_btn{
    width: 100%;
    margin-top: 42px;
  }
  .login_btn button{
    width: 100%;
    height: 50px;
    border: none;
    color: #ffffff;
    background: #169CF1;
    border-radius: 25px;
    font-size: 15px;
  }
  .login_mode{
    margin-top: 20px;
    font-size: 14px;
    color: #4C4C4C;
  }
  .login_mode span:nth-child(2){
    float: right;
  }
  .login_mode a{
    color: #169CF1;
  }

</style>
